<template>
    <div class="user">
        <div class="left">
            <el-menu :default-active="active" router>
                <el-menu-item index="/user/info">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>个人资料</span>
                </el-menu-item>
                <el-menu-item index="/user/list">
                    <el-icon>
                        <ShoppingCartFull />
                    </el-icon>
                    <span>购物车</span>
                </el-menu-item>
                <el-menu-item index="/user/record">
                    <el-icon>
                        <Document />
                    </el-icon>
                    <span>历史订单</span>
                </el-menu-item>
                <el-menu-item index="/user/collect">
                    <el-icon>
                        <Star />
                    </el-icon>
                    <span>收藏夹</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="right">
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import {
    Document,
    User,
    Star,
    ShoppingCartFull
} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router';

const route = useRoute()

const active = ref('')

onMounted(() => {
    active.value = route.path

    watch(() => route.path, () => {
        active.value = route.path
    })
})


</script>

<style scoped lang='less'>
.user {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .left {
        width: 200px;
        height: 700px;
        box-sizing: border-box;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
        padding: 20px;
        user-select: none;

        :deep(.el-menu) {
            border: none;
        }
    }

    .right {
        flex: 1;
        height: 700px;
        box-sizing: border-box;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
        margin-left: 20px;
        padding: 40px;
        overflow-y: hidden;
    }
}</style>